<template>
  <div id="container" @click="this.containerClick" ref="container">
    <div class="order">{{ isTitle ? '' : order}}</div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="operation">
      <a-tooltip title="配置规则"><a-icon type="setting" v-if="!isTitle" class="op-item" @click="openRuleOp"/></a-tooltip>
      <a-tooltip title="删除表单项"><a-icon v-if="!isTitle" type="delete" class="op-item" @click.stop="handleDel"/></a-tooltip>
      <a-tooltip title="移动表单项"><a-icon v-if="!isTitle" type="drag" class="op-item mover"/></a-tooltip>
      <!-- <a @click="handleDel">删除</a> -->
    </div>
  </div>
</template>

<script>

export default {
  props: {
    order: {
      type: Number,
      default: 1,
    },
    isTitle: {
      type: Boolean,
      default: false
    },
    ruleOptionClick: {
      type: Function,
    }
  },
  data() {
    return {
      isFocus: false,
    }
  },
  created() {

  },
  methods: {
    containerClick() {
      Array.from(this.$refs.container.parentElement.children).forEach(item => {
        item.style.borderColor = '#bbb';
        item.style.borderWidth = '1px';
        
      });
      this.$refs.container.style.borderWidth = '2px';
      this.$refs.container.style.borderColor = 'blue';
    },
    /**
     * @Description: 删除单个表单控件
     * @param {*}
     * @Date: 2020-10-27 15:36:07
     */    
    handleDel() {
      const {order} = this
      this.$emit('delItem', order)
    },

    /**
     * @Description: 弹出规则配置项
     * @param {*}
     * @Date: 2020-11-03 10:42:37
     */    
    openRuleOp() {
      this.ruleOptionClick()
    }
  },

}
</script>

<style lang="less">

  #container {
    display: flex;
    border: 1px solid #bbb;
    width: 600px;
    padding: 10px;
    justify-content: space-between;
    margin: 10px;
    background-color: #fff;
    cursor: pointer;
    .order {
      width: 50px;
    }
    .content {
      width: 100%;
    }
    .operation {
      width: 150px;
      font-size: 20px;
      display: flex;
      justify-content: space-around;
      .op-item {
        height: 20px;
      }
      .op-item:hover {
        color: blue;
      }
      .mover{
        // background-color: #fdfdfd;
        cursor: move;
        // padding:3px 6px;
      }
    }
  }
</style>